<template>
  <view class="container gray_bg zn_repair">
    <view class="zn_title">选择报修类型</view>
    <view class="repair_type">
      <tm-sheet :margin="[24, 20]" :round="3" :shadow="2">
        <view v-for="(item, i) in repairTypes" class="repair_type_item" :key="i" @click="() => createRepair(item)">
          <tm-image :width="76" :height="76" :src="`${urlApi}${item.icon}`"></tm-image>
          <view class="type_right">
            <view class="type_r_title">{{item.name}}</view>
            <view class="type_r_des">{{item.desc}}</view>
          </view>
        </view>
      </tm-sheet>
    </view>
    <view class="zn_title">报修记录</view>
    <view class="repair_record">
      <tm-sheet :margin="[24, 20]" :round="3" :shadow="2">
        <view class="record_inner">
          <view class="record_left">
            <image src="@/static/img/repair_record.png"></image>
            <view v-if="orderList.length === 0" class="no_data">暂无报修记录~</view>
            <view v-else class="order_record">
              <view class="order_time">{{lastOrder.created_date}}</view>
              <view class="order_in">提交了{{lastOrder.repair_type_text}}报修工单</view>
            </view>
          </view>
          <tm-button label="查看记录" round="25" @click="checkRepairRecord"></tm-button>
        </view>
      </tm-sheet>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {each} from 'lodash'
import { getAllRepairType } from '@/api_request/api'
import { useInfoStore } from '@/store/userInfo'
import {storeToRefs} from "pinia";
import {ASSETS_HOST} from '@/config'
import {getOrderList} from "../../api_request/repariList";

const urlApi = ref<string>(ASSETS_HOST)
const userStore = useInfoStore()
const { userInfo } : any = storeToRefs(userStore)
console.log('jp======userInfo',userInfo)
const merchant_id = ref(userInfo.value.merchant_id) || 12
const community_id = ref(userInfo.value.community_id) || 1

const repairTypes = ref<any[]>([])
const orderList = ref<any[]>([])
// 最近一条工单数据
const lastOrder = ref<any>({})

const initData = () => {
  getAllRepairType({community_id: community_id.value}).then((res: any) => {
    console.log('jp======报修类型',res)
    repairTypes.value = res.data
  })
//   获取第一条报修记录数据
  getOrderList({ page_num: 1, page_size: 10, merchant_id: merchant_id.value, community_id: community_id.value,}).then((res: any) => {
    console.log('jp=======报修记录',res)
    orderList.value = res.data.list
    lastOrder.value = res.data.list?.[0] || {}
  })
}
initData()
const checkRepairRecord = () => {
  uni.navigateTo({
    url: '/subpkg/apply_repair/list'
  })
}
// 创建报修记录
const createRepair = (item) => {
  // 查看传递参数todo
  console.log('jp======item',item)
  const repairType = item ? JSON.stringify(item) : {}
  uni.navigateTo({
    url: `/subpkg/create_repair/index?repairType=${repairType}`
  })
}
</script>
<style lang="scss" scoped>
  .zn_repair{
    font-size: $cus-font-size-14;
    .zn_title{
      padding: 12px 24px 6px;
      font-size: $cus-font-size-14;
    }
    .repair_type_item{
      display: flex;
      padding: 12px 0;
      .type_r_title{
        font-size: $cus-font-size-14;
      }
      .type_r_des{
        padding-top: 4px;
        font-size: $cus-font-size-12;
        color: $cus-color-1;
      }
      .type_right{
        padding-left: 10px;
      }
    }

    .record_inner{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .record_left{
        display: flex;
        align-items: center;
        .order_in{
          font-size: $cus-font-size-12;
          color: $cus-color-10;
        }
      }
      image{
        width: 38px;
        height:38px;
        margin-right: 8px;
      }
      .no_data{
        color: $cus-color-10;
      }
    }
  }
</style>